<template>
    <div class="wekgo">
       <div class="recoment-title">周末去哪玩</div>
       <ul>
           <li class="item border-bottom" v-for="item of weekendList" :key="item.id">
               <div class="item-img-wrapper">
                   <img class="item-img" :src="item.imgUrl" >
               </div>
               <div class="item-info">
                   <p class="item-title">{{item.title}}</p>
                   <p class="item-appraise">{{item.appraise}}</p>
               </div>
           </li>
       </ul>
    </div>
  </template>

  <script>
  export default {
    name: 'Weekend',
    props: {
      weekendList: Array
    }
  }
  </script>

  <style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .wekgo
    margin-top: .2rem
    border-bottom .04rem solid #cacaca
    padding-bottom .2rem
    .recoment-title
        width: 2rem
        height: .8rem
        line-height: .8rem
        background: $bgColor
        text-indent: .2rem
        margin-bottom: .1rem
        border-radius: 0 0 20% 0
        color: white
        box-shadow: gray 0px 0px 2px 0;
    .item-img-wrapper
      height 0
      padding .1rem
      padding-bottom 33.9%
      overflow hidden
      .item-img
        width 100%
        box-shadow: gray 0px 0px 5px 0;
    .item-info
      padding-left .2rem
      padding-top .2rem
      min-width 0
      .item-title
        color #212121
        font-size .32rem
        line-height: 0.44rem
        padding-bottom .18rem
        elllipsis()
      .item-appraise
        font-size .24rem
        padding-bottom .1rem
        color #616161
        line-height .34rem
        elllipsis()
  </style>
